<template>
  <!-- 弹出选择图标 -->
  <div :class="['popup',showPopup?'showPop':'hidPop']" @click.self="$emit('closeIcon', false)">
    <div class="content">
      <div class="p-4">
        <el-tabs v-model="activeName">
          <el-tab-pane class="d-flex flex-wrap" label="饿了么图标库" name="elementIcon">
            <div class="icon d-flex jc-center ai-center m-2" :class="[icon==temporaryIcon?'selectIcon':'']" v-for="(icon,index) in icons.elementIcon"
              :key="index" @click="selectIcon(icon)">
              <i :class="icon"></i>
            </div>
          </el-tab-pane>
          <el-tab-pane class="d-flex flex-wrap" label="阿里图标库" name="aliIcon">
            <div class="icon d-flex jc-center ai-center m-2" :class="[icon==temporaryIcon?'selectIcon':'']" v-for="(icon,index) in icons.aliIcon"
              :key="index" @click="selectIcon(icon)">
              <i :class="[icon,'iconfont']"></i>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <el-row class="p-3 d-flex jc-end">
        <el-button type="primary" size="small" @click="subIcon">确定</el-button>
        <el-button type="info" size="small" @click="$emit('closeIcon', false)">取消</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
import icons from './icon.js'

export default {
  props: {
    showPopup: Boolean
  },
  data () {
    return {
      temporaryIcon: '',
      activeName: 'elementIcon',
      icons: icons
    }
  },
  methods: {
    // 选择图标
    selectIcon (icon) {
      this.temporaryIcon = icon
      this.$message({
        message: `选中:${this.temporaryIcon}`,
        type: 'success'
      })
    },

    // 确认图标
    subIcon () {
      this.$emit('closeIcon', false)
      this.$emit('subIcon', this.temporaryIcon)
    },


  },
}
</script>


<style lang="scss" scoped>
.popup {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s all;

  .content {
    width: 500px;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .icon {
      width: 40px;
      height: 40px;
      border: 1px solid #dedede;
      color: #4a4a48;
      font-size: 22px;
      border-radius: 4px;
      cursor: pointer;
      transition: 0.3s all;
      &:hover {
        background: #4a4a48;
        color: #fff;
      }
      .iconfont {
        font-size: 26px;
      }
    }
    .selectIcon {
      background: #4a4a48;
      color: #fff;
      border-radius: 4px;
    }
  }
}
.showPop {
  opacity: 1;
  z-index: 9996;
}
.hidPop {
  opacity: 0;
  z-index: -1;
}
</style>
